<template>
  <div class="content">
    <Head mes="0" rig="" title="收藏" bgc="1" />
    <div class="cont_body">
      <div class="box">
        <ul>
          <li v-for="(value,index) in dataA" :key="value.id" v-show="value.state =='1'">
            <div @click="tiao(value.id)">
              <div class="cont_leftimg">
                <img :src="value.url" alt="" />
              </div>
              <div class="cont_righttxt">
                <div>
                  <p>【暑期7天8夜中国抱团旅游】{{ value.title }}</p>
                  <span>B站{{ value.username }}</span>
                </div>
                <div>
                  <span class="el-icon-view">140</span>
                  <span class="el-icon-chat-dot-round">22</span>
                  <span class="el-icon-star-off" @click="qiehuan(index)">12</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <Foot num="4" />
  </div>
</template>
<script>
import Head from "../../components/Head.vue";
import Foot from "../../components/Foot.vue";
export default {
  name: "Mypage",
  components: {
    Head,
    Foot,
  },
  data() {
    return {
      dataA: [],
    };
  },
  methods:{
    qiehuan(index) {
      console.log(this.dataA[index].state);
      this.dataA[index].state = !this.dataA[index].state;
      console.log(this.dataA[index].state);
      this.ajax({
        method: "post",
        url: "/updateSta",
        data: {
          id: this.dataA[index].id,
          state: this.dataA[index].state,
        },
      }).then((res) => {
        console.log(res);
      });
    },
    tiao(value){
      this.$store.commit("gaiid", value);
      this.$router.push({ name: "Mudidi" });
    }
  },
  mounted() {
    this.ajax({
      method: "get",
      url: "/queryAll",
    }).then((res) => {
      this.dataA = res.data;
      // console.log(this.dataA);
    });
  },
};
</script>
<style scoped lang="scss">
.el-icon-star-off{
  color: orange;
}
.content {
  > .top {
    box-shadow: 0px 1px 3px rgba(128, 128, 128, 0.562);
    height: 61px;
  }
  > .cont_body {
    
    box-shadow: -2px 0px 3px 1px gray;
    padding: 10px;
    height: 100%;
    margin-top: 3px;
    overflow: scroll;

    > .box {
      // height: 750px;
      height: 47rem;
      > ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        margin-top: 5px;
        > li {
          margin-bottom: 15px;
          > div {
            width: 100%;
            height: 120px;
            border-radius: 5px;
            display: flex;
            background-color: #ffffff;
            box-shadow: 0px 2px 5px rgba(59, 59, 59, 0.438);
            box-sizing: border-box;
            
            > .cont_leftimg {
              width: 160px;
              height: 120px;
              border-radius: 5px;
              > img {
                width: 160px;
                height: 120px;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
              }
            }
            > .cont_righttxt {
              width: 220px;
              height: 120px;
              display: flex;
              flex-direction: column;
              justify-content: space-evenly;
              > div:nth-of-type(1) {
                > p {
                  margin-left: 10px;
                  margin-bottom: 10px;
                }
                > span {
                  margin-left: 15px;
                }
              }
              > div:nth-of-type(2) {
                margin-left: 15px;
                > span {
                  margin-right: 12px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>